<template>
  <div class="breadcrumb-container">
    <Location style="height: 20; width: 20px; color: #888"></Location>
    <el-breadcrumb class="breadcrumb" separator="/">
      <el-breadcrumb-item
        class="breadcrumb-item"
        v-for="item in route.matched"
        :key="item.path"
        v-show="item.meta.title"
      >
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<style scoped lang="scss">
.breadcrumb-container {
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  background-color: #eee;
  .breadcrumb-item {
    font-size: 16px;
  }
}
</style>
